(function () {

    var style = `
        .cron-job-list {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .cron-job-list .jwebui-table{
            flex: 1;
            overflow: auto;
        }
         
    `;

    var template = `
        <div class="cron-job-list">
            <jwebui-table :cols="cols" :data="datas">
                <template v-slot:run_datetime="slotProps">
                    {{slotProps.data.run_datetime instanceof Date?slotProps.data.run_datetime.Format('yyyy-MM-dd HH:mm:ss') : slotProps.data.run_datetime}}
                </template>
                <template v-slot:run_status="slotProps">
                    <span :style="'color:' + status[slotProps.data.run_status].color">{{status[slotProps.data.run_status].title}}</span>
                </template>
            </jwebui-table>
            <jwebui-page :page="page" @action="pageAction"></jwebui-page>
        </div>
    `
    return {
        data() {
            return {
                page: {
                  currPage: 1,
                  pageSize: 10,
                  total: 0,
                },
                status: [
                    {title: '未执行', color: '#ccc'},
                    {title: '执行成功', color: 'green'},
                    {title: '执行失败', color: 'red'},
                ],
                cols: [
                    { title: '执行时间', key: 'run_datetime', width: '140px' },
                    { title: '执行任务名称', key: 'task_name', width: '*' },
                    { title: 'Cron表达式', key: 'cron', width: '160px' },
                    { title: '执行状态', key: 'run_status', width: '140px' },
                ]
            }
        },
        updated: () => {
        },
        mounted: () => {
        },
        computed: {
            datas() {
                return this.loadCronJobs();
            }
        },
        watch: {
        },
        methods: {
            loadCronJobs: function(){
                var taskId = null;
                var result = ipcRenderer.sendSync("loadCronJobs", { start: (this.page.currPage - 1) * this.page.pageSize, limit: this.page.pageSize, refresh: this.refresh });
                if (result.success) {
                  this.page.total = result.total;
                }
                return result.data;               
            },
            pageAction(num) {
              this.page.currPage = num;
            },
        },
        template: template,
        style: style
    }
})()